//注册页面


// src/pages/RegisterPage.tsx
import React, { useState } from 'react';
import {
    IonPage,
    IonContent,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonItem,
    IonInput,
    IonLabel,
    IonButton,
    IonIcon,
    IonButtons,
    IonBackButton
} from '@ionic/react';
import { lockClosed, mail, person } from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

const RegisterPage: React.FC = () => {
    const [email, setEmail] = useState('wjduan@linx-info.com');
    const [password, setPassword] = useState('duanwujie');
    const [confirmPassword, setConfirmPassword] = useState('duanwujie');
    const [name, setName] = useState('duanwujie');
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);

    const history = useHistory();
    const { register } = useAuth();

    const handleSubmit = async () => {
        if (password !== confirmPassword) {
            return setError('两次输入的密码不一致');
        }
        try {
            setError('');
            setLoading(true);
            await register(email, password, name);
            history.push('/');
        } catch (err) {
            setError('注册失败: ' + (err as Error).message);
        } finally {
            setLoading(false);
        }
    };

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonButtons slot="start">
                        <IonBackButton defaultHref="/login" />
                    </IonButtons>
                    <IonTitle>注册账号</IonTitle>
                </IonToolbar>
            </IonHeader>

            <IonContent className="ion-padding">
                <div className="form-container">
                    {error && (
                        <div className="error-message ion-text-center ion-margin-bottom">
                            {error}
                        </div>
                    )}

                    <IonItem>
                        <IonIcon icon={person} slot="start" />
                        <IonLabel position="stacked">
                            姓名
                        </IonLabel>
                        <IonInput
                            type="text"
                            value={name}
                            onIonChange={e => setName(e.detail.value!)}
                            placeholder="请输入您的姓名"
                        />
                    </IonItem>

                    <IonItem>
                        <IonIcon icon={mail} slot="start" />
                        <IonLabel position="stacked">
                            邮箱
                        </IonLabel>
                        <IonInput
                            type="email"
                            value={email}
                            onIonChange={e => setEmail(e.detail.value!)}
                            placeholder="name@example.com"
                        />
                    </IonItem>

                    <IonItem>
                        <IonIcon icon={lockClosed} slot="start" />
                        <IonLabel position="stacked">
                            密码
                        </IonLabel>
                        <IonInput
                            type="password"
                            value={password}
                            onIonChange={e => setPassword(e.detail.value!)}
                            placeholder="至少6位字符"
                        />
                    </IonItem>

                    <IonItem>
                        <IonIcon icon={lockClosed} slot="start" />
                        <IonLabel position="stacked">
                            确认密码
                        </IonLabel>
                        <IonInput
                            type="password"
                            value={confirmPassword}
                            onIonChange={e => setConfirmPassword(e.detail.value!)}
                            placeholder="再次输入密码"
                        />
                    </IonItem>

                    <IonButton
                        expand="block"
                        onClick={handleSubmit}
                        disabled={loading}
                        className="ion-margin-top"
                    >
                        {loading ? '注册中...' : '注册账号'}
                    </IonButton>

                    <div className="ion-text-center ion-margin-top">
                        <p>
                            已有账号?
                            <IonButton fill="clear" size="small" routerLink="/login">
                                立即登录
                            </IonButton>
                        </p>
                    </div>
                </div>
            </IonContent>
        </IonPage>
    );
};

export default RegisterPage;